<template>
    <van-nav-bar left-arrow fixed title="商品详情" @click-left="router.back()">

        <template #right>
            <van-icon name="ellipsis" />
        </template>
    </van-nav-bar>

    <div class="clear"></div>
    <div class="h50"></div>
    <div class="clear"></div>
    <div class="aui-m-slider">
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="(item, index) in state.info.avatars_cdn" :key="index">
                <img :src="item" />
            </van-swipe-item>
        </van-swipe>
    </div>
    <div class="clear"></div>
    <div class="clear"></div>
    <div class="detailbox">
        <h4>{{ state.info.name }}</h4>
        <div class="price"><em>￥</em>{{ state.info.price }}
            <span class="font">已售{{ state.info.product_num }}件</span>
        </div>
    </div>
    <div class="clear"></div>
    <div class="allkbox"></div>
    <div class="clear"></div>
    <div class="detailbox_2" v-html="state.info.content"></div>
    <van-action-sheet v-model:show="Popupshow" title=" ">
        <div class="content">
            <div class="top">
                <img v-lazy="state.info.avatars_cdn[0]" alt="">
                <div class="detailbox">
                    <h4>{{ state.info.name }}</h4>
                    <div class="price"><em>￥</em>{{ state.info.price }}
                        <span class="font">已售{{ state.info.product_num }}件</span>
                    </div>
                </div>
            </div>
            <div class="num">
                <span>数量</span>
                <van-stepper :max="state.info.stock"  v-model="state.pronum" theme="round"
                    button-size="22" disable-input />
            </div>
            <div class="remark">
                <span>订单备注</span>
                <van-field v-model="state.content" rows="2" autosize type="textarea" maxlength="50" placeholder="请输入订单备注"
                    show-word-limit />
            </div>
            <van-action-bar-button class="btnSubmit" @click="onsubmit" type="danger" text="提交订单" />
        </div>
    </van-action-sheet>
    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-action-bar-icon icon="cart-o" text="购物车" to="/order/cart/index" :badge="state.cartNums" />
        <van-action-bar-icon :icon="state.iconName" @click="onColle" :text="state.iconText" color="#ff5000" />
        <van-action-bar-button @click="onCart" type="warning" text="加入购物车" />
        <van-action-bar-button type="danger" @click="Popupshow = !Popupshow" text="立即购买" />
    </van-action-bar>
</template>
<script setup>
import { showNotify, showConfirmDialog } from 'vant';
import apiList from '@/api'
import { useRouter, useRoute } from 'vue-router';
import { ref, reactive, onMounted } from 'vue'
import { useUserStore } from '@/store/user.js'
import { useProductStore } from '@/store/product.js'
import resJudge from '@/hooks/res.js'

const userStore = useUserStore()
const productStore = useProductStore()
const router = useRouter()
const route = useRoute()
const state = reactive({
    info: {},
    proid: route.query.proid,
    iconName: 'star-o',
    iconText: '收藏',
    busid: userStore.userInfo.id,
    cartNums: 0,
    pronum: 1,
    content:'',
})
const Popupshow = ref(false)

onMounted(async () => {
    getProductInfo()//获取商品详情信息
    getPronum()//获取购物车数量

    let res = await apiList.ProductCollection({ busid: state.busid, proid: state.proid })
    if (res.code == 1) {
        state.iconName = 'star'
        state.iconText = '已收藏'
    } else {
        state.iconName = 'star-o'
    }
})

async function getProductInfo() {
    let result = await apiList.ProductInfo({ proid: state.proid })
    if (result.code === 0) {
        showNotify({
            type: 'warning',
            message: result.msg,
            duration: 1500,
            onClose: () => {
                router.go(-1)
            }
        })
        return false
    }
    state.info = result.data
}

//收藏
async function onColle() {
    //判断有没有登录
    if (Object.keys(userStore.userInfo).length == 0) {
        showNotify({
            type: 'warning',
            message: '请先登录',
            duration: 1500,
            onClose: () => {
                showConfirmDialog({
                    title: '登录',
                    message: '是否需要登录？',
                }).then(() => {
                    router.push({ path: '/business/base/login', query: { action: 'info' } })
                })
            }
        })

        return false
    }

    let res = await apiList.ProductCollection({ busid: state.busid, proid: state.proid, flag: 1 })

    if (resJudge(res)) {
        if (res.data.flag) {
            state.iconName = 'star'
            state.iconText = '已收藏'
        } else {
            state.iconName = 'star-o'
            state.iconText = '收藏'
        }
    }
}

//加入购物车
async function onCart() {
    //判断有没有登录
    if (Object.keys(userStore.userInfo).length == 0) {
        showNotify({
            type: 'warning',
            message: '请先登录',
            duration: 1500,
            onClose: () => {
                showConfirmDialog({
                    title: '登录',
                    message: '是否需要登录？',
                }).then(() => {
                    router.push({ path: '/business/base/login', query: { action: 'info' } })
                })
            }
        })

        return false
    }

    // 组装数据
    let data = {
        proid: state.proid,
        busid: state.busid
    }

    let result = await apiList.CartAdd(data)
    if (result.code === 1) {
        showNotify({
            type: 'success',
            message: result.msg,
            duration: 1500
        })
        getPronum()
    } else {
        showNotify({
            type: 'warning',
            message: result.msg,
            duration: 1500
        })
    }
}

//获取购物车数量
async function getPronum() {
    let res = await apiList.Pronum()
    if (res.code == 1) {
        state.cartNums = res.data
    }
}

function onsubmit() {
    let data = {
        product:state.info,
        proid:state.info.id,
        pronum:state.pronum,
        content:state.content
    }
    productStore.$patch(state=>{
        state.productInfo = data
    })
    router.push({ path: '/order/cart/confirm', query: { action:'productInfo' } })
}

</script>

<style lang="scss" scoped>
.font {
    float: right;
    color: #b7b7bf;
    font-size: 12px;
    font-weight: normal;
    line-height: 30px;
    text-decoration: none !important;
}

.content {
    // height: 336px;
    padding: 16px 16px 150px;

    // display: flex;
    // flex-direction: column;
    .top {
        display: flex;
        justify-content: space-between;

        img {
            max-width: 170px;
            border-radius: 20px;
        }

        h4 {
            font-size: 20px;
        }

        .detailbox {
            padding: 0;
            padding-top: 15px;
            display: flex;
            flex-direction: column;

            .price {
                min-width: 156px;
                margin-top: auto;
            }
        }
    }

    .num {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;

        span {
            display: block;
            font-size: 14px;
            font-weight: bold;
            max-width: 170px;
            max-width: 170px;
        }
    }

    .btnSubmit {
        border-radius: 20px;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .remark {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;

        span {
            font-size: 14px;
            font-weight: bold;
            flex:1;
        }

        .van-cell {
            flex: 3;
            padding: 0;
        }
    }

}
</style>